<template>
	<div class="cart">
		<!-- 标题 -->
		<div class="cart_title">
			<p>购物车</p>
		</div>
		<div class="cart_title_zhan">

		</div>

		<!-- 主体 -->
		<div class="main">
			<!-- 登录前 -->
			<div class="before_login" v-if="!log_flag">
				<div class="before_login_text">
					<p>登录后可查看购物车中的商品</p>
				</div>
				<div class="before_login_button">
					<button><router-link to="/login" style="color: white;">去登录</router-link></button>
				</div>
			</div>

			<!-- 登录后&&加商品前 -->
			<div class="before_add" v-if="log_flag && cart_list.length===0">
				<div class="before_add_img">
					<img src="../../assets/images/img.png" alt="" />
				</div>
				<div class="before_add_text">
					<p>购物车还是空的，快来挑选好物吧</p>
				</div>
				<div class="before_add_button">
					<button><router-link to="/home" style="color: white;">去首页看看</router-link></button>
				</div>
			</div>

			<!-- 登录后&&加商品后 -->
			<div class="after_add">
				<div class="goods" v-for="(item,index) in cart_list" :key="index">
					<div class="goods_select">
						<input type="checkbox" :checked="item.selected"
							@click="checked_goods(item)">


					</div>
					<div class="goods_img">
						<img :src="item.picture" alt="" />
					</div>
					<div class="goods_detail">
						<div class="goods_title">
							<p>{{item.name}}</p>
						</div>
						<div class="goods_desc">
							<p>{{item.attrsText}}</p>
						</div>
						<div class="goods_price">
							<p>￥{{item.price}}</p>
						</div>
						<div class="goods_num">
							<van-stepper v-model="item.count" disable-input @change="change_goods_count(item)"  input-width="40px" button-size="25px"/>
						</div>

					</div>
				</div>

			
			</div>
		</div>

		<!--结算 -->
		<div class="pay">
			<div class="check_all">
				<van-checkbox v-model="checked_all" @click="check_all">全选</van-checkbox>
			</div>
			<div class="price_all">
				￥{{total_price}}
			</div>
			<div class="delete_cart">
				<button @click="delete_goods">删除</button>
			</div>
			<div class="go_pay">
				<button @click="go_fill_order">去结算</button>
			</div>

		</div>

		<!-- 猜你喜欢 -->
		<guess></guess>


		<!-- 占位 -->
		<div class="none">

		</div>
		<!-- 底部 -->
		<foot></foot>
	</div>
</template>

<script>
	import request from '../../api/request.js'
	export default {
		name: 'cart',
		data() {
			return {
				checked_all: true,
				checked_list: [],
				delete_list:[],
				cart_list: [],
				total_price:'',
				log_flag: localStorage.getItem('token') ? true : false
			}
		},
		async mounted() {
			await this.get_cart_list()
			let n=0
			for(var i in this.cart_list){
				
				if(this.cart_list[i].selected===false){
					this.checked_all=false
				}
				else{
					n++
				}
				
			}
			if(n===this.cart_list.length){
				this.checked_all=true
			}
			// 计算总价
			this.count_total_price()
		
		},
		methods: {
			// 获取购物车列表
			async get_cart_list() {
				await this.$store.dispatch('cartStore/get_cart_list')
				this.cart_list = this.$store.state.cartStore.cart_list
			},
			// 计算总价
			count_total_price(){
				this.total_price=0
				for(var i in this.cart_list){
					if(this.cart_list[i].selected===true){
						this.total_price+=Number(this.cart_list[i].price)*Number(this.cart_list[i].count)
					}
				}
			},
			// 选择商品
			checked_goods(item) {
				item.selected=!item.selected
				this.change_goods_checked(item)
				this.count_total_price()
			},
			// 全选
			check_all() {
				if(this.checked_all){
					for(var i in this.cart_list){
						this.cart_list[i].selected=true
					}
				}
				else{
					for(var i in this.cart_list){
						this.cart_list[i].selected=false
					}
				}
				this.select_all()
				// 计算总价
				this.count_total_price()
			},
			// 删除商品
		async	delete_goods() {
				this.delete_list=[]
				for(var i in this.cart_list){
					if(this.cart_list[i].selected===true){
						this.delete_list.push(this.cart_list[i].skuId)
					}
				}
				console.log(this.delete_list)
			await	this.$store.dispatch('cartStore/delete_cart', this.delete_list)
				// 重新获取购物车列表
				this.get_cart_list()
				// 计算总价
				this.count_total_price()
			},
			// 数量变化
			async change_goods_count(item) {
				let res = await request({
					url: `/member/cart/${item.skuId}`,
					method: 'put',
					headers: {
						Authorization: localStorage.getItem('token'),
						
						"Content-Type": "application/json"
					},
					data: {
						
							"count": item.count
						
					}

				})
				// 重新获取购物车列表
				this.get_cart_list()
				// 计算总价
				this.count_total_price()
			},
			// 选择变化
			async change_goods_checked(item) {
				let n=0
				for(var i in this.cart_list){
					
					if(this.cart_list[i].selected===false){
						this.checked_all=false
					}
					else{
						n++
					}
					
				}
				if(n===this.cart_list.length){
					this.checked_all=true
				}
				let res = await request({
					url: `/member/cart/${item.skuId}`,
					method: 'put',
					headers: {
						Authorization: localStorage.getItem('token'),

						"Content-Type": "application/json"
					},
					data: {
						
							"selected": item.selected
						
					}

				})
				// 重新获取购物车列表
				this.get_cart_list()
				// 计算总价
				this.count_total_price()
			
			},
			// 全选请求
			async select_all() {
				let res = await request({
					url: '/member/cart/selected',
					method: 'put',
					headers: {
						Authorization: localStorage.getItem('token'),

						"Content-Type": "application/json"
					},
					data: {
						
							"selected": this.checked_all
						
					}

				})
				// 重新获取购物车列表
				this.get_cart_list()
				// 计算总价
				this.count_total_price()
			},
			// 去结算
			go_fill_order(){
				this.checked_list=[]
				for(var i in this.cart_list){
					
					if(this.cart_list[i].selected===true){
						this.checked_list.push(this.cart_list[i])
					}
					
					
				}
				console.log(this.checked_list)
				this.$router.push({
					name:'fill_order',
					query:{
						item:JSON.stringify(this.checked_list)
					}
				})
			}
		}

	}
</script>

<style lang="scss">
	.cart {
		width: 100%;
		height: 100%;
		background-color: #F7F7F7;

		// 标题
		.cart_title {
			width: 100%;
			height: 6%;
			position: fixed;
			z-index: 999;
			font-weight: bold;
			background-color: #F8F8F8;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			p {
				font-size: 36px;
				padding-left: 30px;
			}
		}

		.cart_title_zhan {
			width: 100%;
			height: 6%;
		}

		// 主体
		.main {
			width: 100%;
			height: auto;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;

			// 登录前
			.before_login {
				width: 100%;
				height: 20%;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: flex-start;

				.before_login_text {
					width: 100%;
					height: 100px;

					display: flex;
					justify-content: center;
					align-items: center;

					p {
						color: gray;
						font-size: 30px;
					}
				}

				.before_login_button {
					width: 100%;
					height: 100px;

					display: flex;
					justify-content: center;
					align-items: center;

					button {
						width: 35%;
						height: 70%;
						border-radius: 50px;
						background-color: #5AB79C;
						color: white;
						font-size: 30px;
						border: none;
					}
				}
			}

			//登录后&&加入购物车前
			.before_add {
				width: 100%;
				height: 100%;
				display: flex;

				flex-wrap: wrap;
				justify-content: center;
				align-items: flex-start;

				.before_add_img {
					width: 100%;
					height: 60%;
					display: flex;
					justify-content: center;
					align-items: flex-end;
					padding-left: 40px;

					img {
						width: 55%;
						height: 70%;
					}
				}

				.before_add_text {
					width: 100%;
					height: 20%;

					p {
						font-size: 26px;
						text-align: center;
						color: gray;
					}
				}

				.before_add_button {
					width: 100%;
					height: 20%;

					display: flex;
					justify-content: center;
					align-items: flex-start;

					button {
						width: 36%;
						height: 60%;
						font-size: 28px;
						border-radius: 50px;
						border: none;
						letter-spacing: 2px;
						background-color: #5AB79C;
						color: white;
					}
				}

			}


			//登录后&&加入购物车后
			.after_add {
				width: 100%;
				height: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: flex-start;

				.goods {
					width: 100%;
                    padding:10px 0;
					van-swipe-cell {
						width: 95%;
						height: 220px;
						margin-top: 30px;
						background-color: #FFFFFF;
						display: flex;

						box-sizing: border-box;
					}
				}

				.goods-card {
					margin: 0;
					background-color: white;
				}

				.delete-button {
					height: 100%;
				}

				.goods {
					width: 95%;
					height: 220px;
					margin-top: 30px;
					background-color: #FFFFFF;
					display: flex;

					box-sizing: border-box;

					.goods_select {
						width: 10%;
						height: 100%;

						display: flex;
						justify-content: center;
						align-items: center;

					}

					.goods_img {
						width: 30%;
						height: 100%;

						display: flex;
						justify-content: center;
						align-items: center;

						img {
							width: 90%;
							height: 90%;
						}
					}

					.goods_detail {
						width: 60%;
						height: 100%;

						display: flex;
						flex-wrap: wrap;
						justify-content: center;
						align-items: flex-start;

						.goods_title {

							width: 100%;
							height: 40%;
							display: flex;
							justify-content: center;
							align-items: center;

							p {
								font-size: 25px;
								padding: 0 10px;
								box-sizing: border-box;
							}
						}

						.goods_desc {
							width: 90%;
							height: 40%;
							display: flex;
							justify-content: center;
							align-items: center;
							box-sizing: border-box;

							p {
								font-size: 20px;
								padding: 0 10px;
								background-color: #F7F7F7;
								color: #8E8E8E;
							}
						}

						.goods_price {
							width: 50%;
							height: 20%;
							display: flex;
							padding-left: 10px;
							box-sizing: border-box;
							justify-content: flex-start;
							align-items: center;

							p {
								font-size: 25px;
								color: #AA535C;
							}

						}

						
					}

				}
			}
		}

		.pay {
			width: 100%;
			height: 90px;
			background-color: #FFFFFF;
			position: fixed;
			bottom: 6%;
			display: flex;
			font-size: 30px;

			.check_all {
				width: 30%;
				height: 100%;


				display: flex;
				justify-content: center;
				align-items: center;
			}

			.price_all {
				width: 40%;
				height: 100%;
                color: #AE6262;
				display: flex;
				font-size: 28px;
				justify-content: flex-start;
				align-items: center;
			}

			.delete_cart {
				margin-right: 10px;
				width: 30%;
				height: 100%;

				display: flex;
				justify-content: center;
				align-items: center;

				button {
					width: 100%;
					height: 80%;
					border-radius: 50px;
					border: none;
					background-color: #FD3C67;
					color: white;
				}
			}

			.go_pay {
				width: 30%;
				height: 100%;

				display: flex;
				justify-content: center;
				align-items: center;

				button {
					width: 100%;
					height: 80%;
					border-radius: 50px;
					border: none;
					background-color: #5AB79C;
					color: white;
				}
			}

		}

		.none {
			width: 100%;
			height: 100px;
			background-color: #F7F7F7;
		}


	}
</style>